{include file="common:header" /}
{include file="common:side" /}
<div id="page-wrapper">
  <!-- 管理员列表->编辑添加管理员 -->
  <!--*************************** content部分开始 ******************-->
  <div class="container-fluid" id="m_main">
    <div class="row m-t-20">
      <div class="col-sm-12">
        <div class="white-box">
          <h3 class="box-title m-b-20">编辑/添加 管理员</h3>
          <!-- <p class="text-muted m-b-30">Data table example</p> -->
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">管理员昵称：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.user_name" name="user_name">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">管理员密码：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.password" name="password">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">手机号：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.phone" name="phone">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">部门：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <select class="selectpicker" data-style="form-control" name="group_id" v-model="dataInfo.group_id" id="group_id" @change="getRoleList">
                    <option value="0">请选择</option>
                    <option v-if="groupList.length>0" v-for="item in groupList" :value="item.id">{{item.gr_name}}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">角色：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <select class="selectpicker" data-style="form-control" name="role_id" v-model="dataInfo.role_id" id="role_id">
                    <option value="">请选择</option>
                    <option :value="item.id" v-for="item in roleList">{{item.gr_name}}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <label class="control-label col-sm-4 col-lg-3">备注：</label>
                <div class="col-sm-8 col-lg-9 vm">
                  <input type="text" class="form-control" placeholder="" v-model="dataInfo.remark" name="remark">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div class="form-group">
                <div class="col-sm-12">
                  <div class="checkbox checkbox-info checkbox-circle di m-r-10">
                    <input type="checkbox" name="is_lock" v-model="dataInfo.is_lock" id="is_lock">
                    <label for="is_lock" class="m-r-10">锁定</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ta-c m-t-40">
          <button type="button"class="btn btn-info" @click="sendEmployee">确认</button>
        </div>
      </div>
    </div>
    <!-- /.row -->
  </div>
  <!--*************************** content部分结束 ******************-->

  <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
</div>
{include file="common:js" /}
<script type="text/javascript" src="/web/js/search_list.js"></script>
{include file="common:footer" /}
{include file="component:pagination" /}
<script type="text/javascript">
  var vm1 = new Vue({
    el: '#m_main',
    data() {
      return {
        id: undefined, //当前管理员id
        dataInfo: {id:'',user_name:'',password:'',phone:'',group_id:'',group_name:'',role_id:'',role_name:'',remark:'',is_lock:false},  //管理员信息
        groupList:[],//部门下拉列表
        roleList: [], //部门对应角色列表
      }
    },
    mounted() {
      this.initSelectPicker();
      this.getGroupList();
      this.getDataInfo();
    },
    methods: {
      // 点击下拉时按最新数据渲染下拉选项
      initSelectPicker(){
        $("#group_id").on('shown.bs.select',function(e){
          $('#group_id').selectpicker('refresh');
        })
        $("#role_id").on('shown.bs.select',function(e){
          $('#role_id').selectpicker('refresh');
        })
      },
      // 获取部门列表
      getGroupList(){
        var that = this;
        axios.post('/dboard/admingr/getPgr',{},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
          if(res.data.Code==0){
            that.groupList = res.data.Data;
          }
        }).catch(err=>{})
      },
      // 获取基础信息
      getDataInfo(){
        var that = this;
        if(window.location.href.lastIndexOf('/id/') >= 0){
          // 为编辑页面
          that.id = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
          // 获取当前编辑的用户信息
          axios.post('/dboard/adminusers/infoData',{id:that.id},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
            if(res.data.Code==0){
              that.dataInfo = res.data.Data;
              $('#group_id').selectpicker('val',that.dataInfo.group_id);
              that.getRoleList();
            }else{
              alert(res.data.Msg);
            }
          }).catch(err=>{})
        }
      },
      // 改变部门获取对应部门角色列表
      getRoleList(){
        var that = this;
        axios.post('/dboard/admingr/getCgr',{group_id:that.dataInfo.group_id},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
          if(res.data.Code==0){
            that.roleList = res.data.Data;
            $('#role_id').selectpicker('val',that.dataInfo.role_id);
          }
        }).catch(err=>{})
      },
      // 提交管理员
      sendEmployee(){
        var that = this;
        var dataInfo = that.dataInfo;
        that.groupList.map(item=>{
          if(item.id == dataInfo.group_id){
            dataInfo.group_name = item.gr_name;
          }
        })
        that.roleList.map(item=>{
          if(item.id == dataInfo.role_id){
            dataInfo.role_name = item.gr_name;
          }
        })
        axios.post('/dboard/adminusers/aeAdmin',{dataInfo:dataInfo},{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res=>{
          if(res.data.Code==0){
            alert('保存成功');
            if(that.id){
              // 编辑则刷新
              window.reload();
            }else{
              // 新增则跳转回列表
        //      window.location.href = "/dboard/adminusers/lists";
              //或res返回新增人员id，跳转至该id的编辑页面
              // window.location.href = "/dboard/admin/employeeLists" + res.data.id;
            }
          }else{
            alert(res.data.Msg);
          }
        }).catch(err=>{})
      }
    }
  })
</script>
